<template>
  <div class="invite-btn tac" :style="{
    paddingTop,
    paddingBottom,
    width,
    backgroundImage: image,
    color,
    fontSize,
    borderRadius
  }" @click="clickCallback">
    <slot>立即邀请</slot>
  </div>
</template>

<script>
  export default {
    name: "invitebtn",
    props: {
      width: {
        type: String,
        default: ''
      },
      height: {
        type: String,
        default: ''
      },
      image: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: ''
      }
    },
    watch: {
      height(val) {
        this.initHeight(val);
      },
    },
    data() {
      return {
        borderRadius: '',
        paddingBottom: '',
        paddingTop: '',
        fontSize: '',
      }
    },
    mounted() {
      this.initHeight(this.height);
    },
    methods: {
      initHeight(val) {
        if (val) {
          let hUnit = val.match(/[a-z]+/i)[0] || 'px';
          let h = parseFloat(val);
          let fontSize = h / 4 + hUnit;
          this.fontSize = h / 2 + hUnit;
          this.paddingBottom = fontSize;
          this.paddingTop = fontSize;
          this.borderRadius = h / 2 + hUnit;
        } else {
          this.fontSize = '';
          this.paddingBottom = '';
          this.paddingTop = '';
          this.borderRadius = '';
        }
      },
      clickCallback(e) {
        this.$emit('callback', e);
      },
    }
  }
</script>

<style scoped lang="less">
  @keyframes btn-flash {
    25% {
      transform: scale(1.05);
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.08);
    }
  }

  .invite-btn {
    padding: .5rem 0;
    width: 20.63rem;
    line-height: 1;
    border-radius: 1.4rem;
    color: #fff;
    animation: btn-flash 2s infinite;
    /*background: url(../images/invite/btn_lijiyaoqing.png) no-repeat top left / 100% 100%;*/
  }

</style>
